<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="${request.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
    <title>创建活动</title>
    <link href="Content/wechat/css/reset.css" rel="stylesheet" type="text/css">
    <!--签到-->
    <link href="Content/wechat/css/dangJian_gongZhuGongJian_CJHD.css" rel="stylesheet" type="text/css">

    <script src="Content/wechat/js/jquery.min.js"></script>
    <!--字体缩放-->
    <script src="Content/wechat/js/ziti.js"></script>
    <!--end 字体缩放-->
    <!--上传图片js-->
    <script  src="Content/wechat/js/svg.js"></script>
    <!--end 上传图片js-->
    <script src="Content/wechat/js/jquery.validate.js"></script>
    <!--微信 上传图片js-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${jsApiConfig.appId!}', // 必填，公众号的唯一标识
            timestamp: ${jsApiConfig.timestamp!}, // 必填，生成签名的时间戳
            nonceStr: '${jsApiConfig.nonceStr!}', // 必填，生成签名的随机串
            signature: '${jsApiConfig.signature!}',// 必填，签名
            jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
        });

    </script>
</head>
<body>
<header class="clearfix">
    <h2>创建活动</h2>
    <!--<button class="quxiao_btn">取消</button>-->
</header>
<div class="xinyuan">
    <form id="form">
    <div class="xinyuan_box">
        <dl class="clearfix">
            <dt>活动名称</dt>
            <dd>
                <input class="text" type="text" name="activityname" id="activityname" placeholder="请输入活动名称">
            </dd>
        </dl>
        <dl class="clearfix">
            <dt>报名人数</dt>
            <dd>
                <input class="text" type="number" min="1" name="willnum" id="willnum" placeholder="请输入报名人数">
            </dd>
        </dl>
        <dl class="clearfix">
            <dt>联系电话</dt>
            <dd>
                <input class="text" type="text" name="contactnumber" id="contactnumber" placeholder="请输入联系电话">
                <label hidden="hidden" id="realizename-errorsj" class="error"></label>
            </dd>
        </dl>
        <dl class="clearfix">
            <dt>发布单位</dt>
            <dd>
                <input class="text" type="text" name="releaseunit" id="releaseunit" placeholder="请输入发布单位">
            </dd>
        </dl>
        <dl class="clearfix">
            <dt>活动开始日期</dt>
            <dd>
                <input class="text" type="date" name="starttime" id="starttime" value="" placeholder="请输入发布单位">
            </dd>
        </dl>
        <dl class="clearfix">
            <dt>活动结束日期</dt>
            <dd>
                <input class="text" type="date" name="endtime" id="endtime" value="" placeholder="请输入发布单位">
            </dd>
        </dl>

        <dl class="clearfix">
            <dt>所属社区</dt>
            <dd><select  name="communityid" id="communityid">
                <!--<option>-&#45;&#45;请选择-&#45;&#45;</option>-->
                <#list commList as item>
                    <option value="${item.id}" >${item.communityname!}</option>
                </#list>
            </select>
            </dd>
        </dl>
        <h4>活动内容：</h4>
        <textarea class="textarea" name="content" id="content" placeholder="请简要说明"></textarea>

        <!--上传多张图片-->
        <!--上传多张图片-->
        <section>
            <p class="red">*（非必选）可以选择上传图片，最多8张</p>
            <article>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls">
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls">
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian"></use>
                    </svg>
                    <input name="url" type="button" class="upload_input" onChange="preview(this)">
                    <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                    <div class="preview"></div>
                    <div class="click" onClick="loadImg(this)"></div>
                    <div class="delete" onClick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu4"></use>
                        </svg>
                    </div>
                </div>

                <div style="clear: left;"></div>
            </article>
        </section>
        <!--end 上传多张图片-->
    </div>
    </form>
    <div class="button_shangChuan" id="btnAdd">确定</div>
</div>
</body>
<script type="text/javascript">
    var btnAdd = true;
    // 预览
    var loadImg = function (obj) {
        preview(obj);
    }
    // 删除
    var deleteImg = function (obj) {
        $(obj).parent().find('input').val('');
        $(obj).parent().find('.preview').html('');
        $(obj).hide();
    }

    // 预览
    function preview(obj) {
        var prevDiv = $(obj).parent().find('.preview');
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图
                prevDiv.html('<img src="' + localIds + '" />');
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        $(obj).parent().find('.delete').show();
                        $(obj).parent().find("input[name='uploadImgUrls']").val(res.serverId);
                    }
                });
            }
        });
    }
    $().ready(function () {
        $(".button_shangChuan").click(function () {
            if (!btnAdd) {
                alert("保存中...");
                return;
            }
            var contactnumber = document.getElementById('contactnumber').value;
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(contactnumber))){
                $("#realizename-errorsj").html("请输入正确的手机号格式");
                return false;
            }
            if ($("#form").valid()) {
                if (true) {
                    btnAdd = false;
                    $("#btnAdd").html("保存中...")

                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/wechat/home/party/report/report_saveForm",//url
                        data: $('#form').serialize(),
                        success: function (result) {
                            console.log(result);//打印服务端返回的数据(调试用)
                            if (result.code == 200) {
                                window.location.href = "wechat/home/party/report/report_index"
//                                    alert(result.info);
//                                    location.reload();
                                // var fr
                            } else {
                                alert("请稍后再试");
                                btnAdd = true;
                                $("#btnAdd").html("保存中");
                            }
                        },
                        error: function () {
                            alert("异常！");
                            btnAdd = true;
                            $("#btnAdd").html("保存");
                        }
                    });
                }
            }
        });
        $("#form").validate({
            rules: {
                activityname: {
                    required: true,
                    minlength: 2,
                    maxlength: 13,

                },
                willnum: {
                    required: true,
                    digits:"只能输入数字",
                    minlength: 1,
                    maxlength: 6,

                },
                releaseunit: {
                    required: true,
                    minlength: 1,
                    maxlength: 50,

                },
                starttime: {
                    required: true,
                },
                endtime: {
                    required: true,
                },
                content: {
                    required: true,
                    minlength: 5,
                    maxlength: 500,

                }
//                ,
//                overday: {
//                    required: true,
//                    Validateoverday: true
//
//                }
            },
            messages: {
                activityname: {
                    minlength: "(字符不能少于 2 个且不能大于 13个)",
                    maxlength: "(字符不能少于 2 个且不能大于 13个)",
                },
                content: {
                    minlength: "(字符不能少于 5 个且不能大于 500个)",
                    maxlength: "(字符不能少于 5 个且不能大于 500个)",
                },
                willnum: {
                    range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),
                },
                releaseunit: {
                    minlength: "(字符不能少于 1 个且不能大于 30个)",
                    maxlength: "(字符不能少于 1 个且不能大于 30个)",
                }

            }


        })
//        jQuery.validator.addMethod("Validateoverday", function (value, element) {
//            return this.optional(element) || (/^[1-9]\d*$/.test(value));
//        }, "请输入正整数");
    });

</script>
</html>
